<template>
    <div class="flex h-full">
        <!-- 侧边栏 -->
        <div class="w-[15VW] bg-[#006263] text-white flex flex-col items-center p-4 space-y-6">
            <!-- 导航链接 -->
            <div class="flex flex-col items-center">
                <div class="text-2xl font-bold">您好，</div>
                <div class="text-2xl font-bold">{{ user.name }}{{ user.identity }}</div>
            </div>
            <var-button block color="#FFFFFF" @click="goHome">主页</var-button>
            <var-button block color="#FFFFFF" @click="goMyDepartment">我的科室</var-button>
            <var-button block color="#FFFFFF" @click="goMyPatient">科室患者</var-button>
            <var-button block color="#FFFFFF" @click="goMyInfro">我的信息</var-button>
            <var-button v-if="user.userRole == '1'" block color="#FFFFFF" @click="goManager">管理员后台</var-button>
            <div class="flex-grow"></div>
            <Icon type="exit" extraclass="icon" size="40" color="#FFFFFF" @click="show = true"></Icon>
        </div>
        <var-dialog title="确认退出当前账号？" confirm-button-text-color="#006263" cancel-button-text-color="#006263" v-model:show="show" @confirm="logout" @cancel="show = false" />
        <!-- 主内容区域 -->
        <div class="w-[85VW] h-full bg-gray-100 overflow-auto">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            show: false
        };
    },
    computed: {
        user() {
            return this.$store.user;
        }
    },
    methods: {
        // 跳转到主页
        goHome() {
            this.$router.push('/user/home');
        },
        // 跳转到我的信息页面
        goMyInfro() {
            this.$router.push('/user/myInfo');
        },
        goMyDepartment() {
            this.$router.push('/user/myDepartment');
        },
        goManager() {
            this.$router.push('/manager');
        },
        goMyPatient() {
            this.$router.push('/user/myPatient');
        },
        // 退出登录
        logout() {
            this.$router.push('/login');
            localStorage.removeItem('token');
            this.$store.user.clearUserInfo();
        }
    }
};
</script>

<style></style>
